<template>
	<div>
		<el-form ref="merchantDatas" :model="merchantDatas">
			<table v-if="this.companyId !== '2' " class="form-table" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
			  	<tbody>
			  		<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('mer.CompanyInfo')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>{{$t('mer.Merchant1')}}*</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.name" :disabled="disabled" maxlength="100" /></td>
				  		<td>{{$t('mer.BusinessAddress')}}*</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.address" :disabled="disabled" maxlength="250" /></td>
				  		<td>{{$t('mer.MailAddress')}}</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.mailingAddress" :disabled="disabled" maxlength="250" /></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.BRNo')}}*</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.businessRegistrationNo" :disabled="disabled"/></td>
				  		<td>{{$t('mer.Capital') + currency }}</td>
				  		<td>
                <!-- <input type="number" v-model="merchantDatas.registeredCapital" @keyup="formatMoney(1,0)" :disabled="disabled" maxlength="20" /> -->
                <input type="text" v-model.lazy="merchantDatas.registeredCapital" :disabled="disabled" maxlength="20" onkeyup="var source=this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value=source.join('.')">
              </td>
				  		<td>{{$t('mer.YearsOfBusiness')}}</td>
				  		<td><input type="number" v-model.lazy="merchantDatas.establishmentYear" :disabled="disabled"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.IncorporationCountry')}}</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.establishPlace" :disabled="disabled"/></td>
				  		<td>{{$t('mer.EmployeeNo')}}</td>
				  		<td><input type="number" v-model.lazy="merchantDatas.staffNumber" :disabled="disabled"/></td>
				  		<td>{{$t('mer.MerchantType')}}*</td>
				  		<td v-if="disabled"><input type="text" v-model.lazy="merchantDatas.merchantsType" :disabled="disabled"/></td>
				  		<td v-else>
				  			<el-select :placeholder="$t('placeH.Please')" v-model="merchantDatas.merchantsType" clearable style="line-height: 40px;">
			  					<el-option :value="$t('mer.OnlineMerchants')"></el-option>
					    		<el-option :value="$t('mer.UnderLineMerchant')"></el-option>
					    	</el-select>
				  		</td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.OwnershipType')}}</td>
				  		<td v-if="disabled"><input type="text" v-model.lazy="merchantDatas.companyType" :disabled="disabled"/></td>
				  		<td v-else>
				  			<el-select :placeholder="$t('placeH.Please')" v-model.lazy="merchantDatas.companyType" clearable style="line-height: 40px;">
			  					<el-option :value="$t('mer.LimitedCompany')"></el-option>
					    		<el-option :value="$t('mer.Partnership')"></el-option>
					    		<el-option :value="$t('mer.SoleProprietor')"></el-option>
					    	</el-select>
				  		</td>
				  		<td>{{$t('mer.Contractperson')}}*</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.liaisonPerson" :disabled="disabled"/></td>
				  		<td>{{$t('mer.Email')}}</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.email" :disabled="disabled"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.Position1')}}</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.post" :disabled="disabled"/></td>
				  		<td>{{$t('mer.OfficePhone')}}*</td>
				  		<td><input type="number" v-model.lazy="merchantDatas.officeNo" :disabled="disabled" maxlength="50" /></td>
				  		<td>{{$t('mer.Mobile')}}*</td>
				  		<td><input type="number" v-model.lazy="merchantDatas.liaisonPhone" :disabled="disabled" maxlength="50" /></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.Fax')}}</td>
				  		<td><input type="number" v-model.lazy="merchantDatas.fax" :disabled="disabled"/></td>
				  		<td>{{$t('mer.Director')}}*</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.legalPerson" :disabled="disabled" maxlength="100" /></td>
				  		<td>{{$t('mer.DirectorHKID')}}*</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.legalPersonIdNumber" :disabled="disabled"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.DirectorPassport')}}</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.passportNumber" :disabled="disabled"/></td>
				  		<td>{{$t('mer.Nationality')}}</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.nationality" :disabled="disabled"/></td>
				  		<td>{{$t('search.SubAccountNo')}}*</td>
				  		<td><input type="number" v-model.lazy="merchantDatas.no" :disabled="disabled"/></td>
				  	</tr>
				  	<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('mer.ContactInfo')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>{{$t('mer.URL')}}</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.url" :disabled="disabled"/></td>
				  		<td>{{$t('mer.TargetLaunchDate')}}</td>
				  		<td><el-date-picker v-model.lazy="merchantDatas.launchDate" :editable=false type="date" :placeholder="$t('placeH.Please')" :disabled="disabled"></el-date-picker></td>
				  		<td></td>
				  		<td></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.TechnicalContact')}}</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.technical" :disabled="disabled"/></td>
				  		<td>{{$t('mer.Email')}}</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.technicalEmail" :disabled="disabled"/></td>
				  		<td>{{$t('shop.Phone')}}</td>
				  		<td><input type="number" v-model.lazy="merchantDatas.technicalPhone" :disabled="disabled"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.OperationContact')}}</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.operation" :disabled="disabled"/></td>
				  		<td>{{$t('mer.Email')}}</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.operationEmail" :disabled="disabled"/></td>
				  		<td>{{$t('shop.Phone')}}</td>
				  		<td><input type="number" v-model.lazy="merchantDatas.operationPhone" :disabled="disabled"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.FinanceContact')}}</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.accountant" :disabled="disabled"/></td>
				  		<td>{{$t('mer.Email')}}</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.accountantEmail" :disabled="disabled"/></td>
				  		<td>{{$t('shop.Phone')}}</td>
				  		<td><input type="number" v-model.lazy="merchantDatas.accountantPhone" :disabled="disabled"/></td>
				  	</tr>
				  	<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('mer.BusinessInfo')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>{{$t('mer.BusinessNature')}}</td>
              <td>
                <el-select v-model="merchantDatas.industry" @change="selectIndustry()" id='HKIndustry' :placeholder="$t('placeH.Please')" :disabled="disabled" clearable style="line-height: 40px;">
                  <el-option v-for="item in optionsI" :key="item.id" :label="item.industryName" :value="item.industryName"></el-option>
                </el-select>
              </td>
				  		<td>{{$t('mer.ProductsServices')}}</td>
				  			<!--<td v-if="disabled"><input type="text" v-model="merchantDatas.industry" :disabled="disabled"/></td>-->					  		
				  		<td><input type="text" v-model.lazy="merchantDatas.profession" :disabled="disabled"/></td>
				  		<td>{{$t('mer.TargetCustomers')}}</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.targetClient" /></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.provider')}}</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.paymentServiceProvider" :disabled="disabled"/></td>
				  		<td>{{$t('mer.Turnover')+currency}}</td>
				  		<td>
                <!-- <input type="number" v-model="merchantDatas.turnover" :disabled="disabled"/> -->
                <input type="text" v-model.lazy="merchantDatas.turnover" :disabled="disabled" onkeyup="var source=this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value=source.join('.')">
              </td>
				  		<td></td>
				  		<td></td>
				  	</tr>
				  	<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('mer.OnlineBusiness')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>{{$t('mer.DeliveryProvider')}}</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.expressSupplier" :disabled="disabled"/></td>
				  		<td>{{$t('mer.CustomerHotline')}}</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.serviceHotline" :disabled="disabled"/></td>
				  		<td>{{$t('mer.ReturnRefundPolicy')}}</td>
				  		<td>
 						  	<el-select :placeholder="$t('placeH.Please')" v-model="isReturnPolicy" @change="selectReturnPolicy()" clearable style="line-height: 40px;" :disabled="disabled">
			  					<el-option :value="$t('search.YES')"></el-option>
					    		<el-option :value="$t('search.NO')"></el-option>
					    	</el-select> 
						</td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.FulfuillmentTime')}}</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.cycleTime" :disabled="disabled"/></td>
				  		<td>{{$t('mer.ReceiptProvided')}}</td>
				  		<td>
							  <!-- <input type="text" v-model="merchantDatas.isSignFor" :disabled="disabled"/> -->
							 <el-select :placeholder="$t('placeH.Please')" v-model="isSignFor" @change="selectIsSignFor" clearable style="line-height: 40px;" :disabled="disabled">
			  					<el-option :value="$t('search.YES')"></el-option>
					    		<el-option :value="$t('search.NO')"></el-option>
					    	</el-select> 
						</td>
				  		<td></td>
				  		<td></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.ForecastMonthlySales')}}</td>
				  		<td>
				  			<div class="quarter">{{$t('mer.After3Months')}}：</div>
				  			<!-- <input style="width: 60%;float: right;" type="text" placeholder="" v-model="merchantDatas.budgetTurnoverThree" :disabled="disabled"/> -->
                <input type="text" style="width: 60%;float: right;" v-model.lazy="merchantDatas.budgetTurnoverThree" :disabled="disabled" onkeyup="var source=this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value=source.join('.')">
				  		</td>
				  		<td></td>
				  		<td>
				  			<div class="quarter">{{$t('mer.After6Months')}}：</div>
				  			<!-- <input style="width: 60%;float: right;" type="text" v-model="merchantDatas.budgetTurnoverSix" :disabled="disabled"/> -->
                <input type="text" style="width: 60%;float: right;" v-model.lazy="merchantDatas.budgetTurnoverSix" :disabled="disabled" onkeyup="var source=this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value=source.join('.')">
				  		</td>
				  		<td></td>
				  		<td>
				  			<div class="quarter">{{$t('mer.After1Year')}}：</div>
				  			<!-- <input style="width: 60%;float: right;" type="text" v-model="merchantDatas.budgetTurnoverYear" :disabled="disabled"/> -->
                <input type="text" style="width: 60%;float: right;" v-model.lazy="merchantDatas.budgetTurnoverYear" :disabled="disabled" onkeyup="var source=this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value=source.join('.')">
				  		</td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.NoOfTransactions')}}</td>
				  		<td><input type="number" v-model.lazy="merchantDatas.monthDealSum" :disabled="disabled"/></td>
				  		<td></td>
				  		<td></td>
				  		<td></td>
				  		<td></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.SalesVolume')+currency}}</td>
				  		<td>
                <!-- <input type="number" v-model="merchantDatas.monthOperationRental" :disabled="disabled"/> -->
                <input type="text" v-model.lazy="merchantDatas.monthOperationRental" :disabled="disabled" onkeyup="var source=this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value=source.join('.')">
              </td>
				  		<td></td>
				  		<td></td>
				  		<td></td>
				  		<td></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.AvgTransactionAmount')+currency}}</td>
				  		<td>
                <!-- <input type="number" v-model="merchantDatas.monthDealAvg" :disabled="disabled"/> -->
                <input type="text" v-model.lazy="merchantDatas.monthDealAvg" :disabled="disabled" onkeyup="var source=this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value=source.join('.')">
              </td>
				  		<td>{{$t('mer.MinTransactionAmount')+currency}}</td>
				  		<td>
                <!-- <input type="number" v-model="merchantDatas.monthDealMin" :disabled="disabled"/> -->
                <input type="text" v-model.lazy="merchantDatas.monthDealMin" :disabled="disabled" onkeyup="var source=this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value=source.join('.')">
              </td>
				  		<td>{{$t('mer.MaxTransactionAmount')+currency}}</td>
				  		<td>
                <!-- <input type="number" v-model="merchantDatas.monthDealMax" :disabled="disabled"/> -->
                <input type="text" v-model.lazy="merchantDatas.monthDealMax" :disabled="disabled" onkeyup="var source=this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value=source.join('.')">
              </td>
				  	</tr>
				  	<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('mer.SettlementInfo')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>{{$t('mer.AccountName')}}*</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.accountName" :disabled="disabled"/></td>
				  		<td>{{$t('mer.AccountNo')}}*</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.accountNo" :disabled="disabled"/></td>
				  		<td>{{$t('mer.BankName')}}*</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.bankName" :disabled="disabled"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.BankCode')}}*</td>
				  		<td><input type="number" v-model.lazy="merchantDatas.bankCode" :disabled="disabled"/></td>
				  		<td>{{$t('mer.BranchCode')}}</td>
				  		<td><input type="number" v-model.lazy="merchantDatas.branchCode" :disabled="disabled"/></td>
				  		<td>{{$t('mer.Address')}}*</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.bankAddres" :disabled="disabled"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.SWIFT')}}*</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.swiftCode" :disabled="disabled"/></td>
				  		<td>{{$t('mer.ServiceChargeRate')}}*</td>
				  		<td><input type="number" v-model.lazy="merchantDatas.fee" :disabled="disabled"/></td>
				  		<td>{{$t('mer.ServiceChargeBearer')}}*</td>
				  		<td v-if="disabled"><input type="text" v-model.lazy="merchantDatas.chargeType" :disabled="disabled"/></td>
				  		<td v-else>
				  			<el-select :placeholder="$t('placeH.Please')" v-model.lazy="merchantDatas.chargeType" clearable style="line-height: 40px;">
			  					<el-option :value="$t('mer.Customer')"></el-option>
					    		<el-option :value="$t('button.Merchant')"></el-option>
					    	</el-select>
				  		</td>
				  	</tr>
				  	<tr>
              <td>{{$t('AuMer.SettlementPeriod') + '(T+)'}}*</td>
				  		<td>
				  			<el-select :placeholder="$t('placeH.Please')" v-model.lazy="merchantDatas.setDay" clearable style="line-height: 40px;" :disabled="disabled">
			  					<el-option value="2"></el-option>
					    		<el-option value="3"></el-option>
					    	</el-select>
				  		</td>
				  		<td>{{$t('search.AgentName')}}*</td>
				  		<!-- <td v-if="disabled">
				  			<input type="text" v-model="merchantDatas.distributorNumber" :disabled="disabled"/>
				  		</td> -->
				  		<td>
						  	<el-select id="distributorObj" v-model="distributorObj" @change='selectId()' value-key="id" clearable :placeholder="$t('placeH.Please')" :disabled="disabled" style="line-height: 40px;">
							    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item">
							    </el-option>
						  	</el-select>
				  		</td>
				  		<td>{{$t('search.levelID1')}}*</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.distributorId" disabled="disabled"/></td>
				  	</tr>
				  	<tr>
              <td>{{$t('salesman.Salesman')}}</td>
				  		<!-- <td v-if="disabled"><input type="text" v-model="merchantDatas.salesmanName" :disabled="disabled"/></td> -->
				  		<td>
				  			<el-select :placeholder="$t('placeH.Please')" id="salesmanObj" v-model="salesmanObj" value-key="id" @change='selectSalesman()' clearable :disabled="disabled" style="line-height: 40px;">
			  					<el-option v-for='item in selectSalesmanData' :key="item.id" :label="item.salesmanName" :value="item"></el-option>
					    	</el-select>
				  		</td>
				  		<td>{{$t('agent.BDStaffNo')}}</td>
				  		<td><input type="text" v-model.lazy="merchantDatas.salesmanNumber" disabled="disabled"/></td>
				  		<td>{{$t('agent.commissionRatio')}}</td>
				  		<td><input type="number" v-model.lazy="merchantDatas.salesmanProportion" :disabled="disabled"/></td>
				  	</tr>
				  	<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('mer.Attachments')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>{{$t('mer.BR')}}*</td>
				  		<td>
				  			<el-upload  action="/api/share/picture/upload" :before-upload="beforeImgUpload" :disabled="disabled" :show-file-list="false" :on-success="handleBusinessSuccess" name="upfile" list-type="picture" :headers="headers">
				  				<div v-if="merchantDatas.businessRegistrationUrl" class="imgBox">
		  							<img :src="merchantDatas.businessRegistrationUrl" class="avatar imgNow">
		  							<span class="delImg" v-show='!disabled' @click="delImg()">×</span>
		  						</div>
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
				  		</td>
				  		<td>{{$t('mer.CertOfIncoporation')}}*</td>
				  		<td>
				  			<!--<el-upload action="/api/share/picture/upload" :disabled="disabled" :show-file-list="false" :on-success="handleCompanySuccess" name="upfile" list-type="picture" :headers="headers">
		  						<img v-if="merchantDatas.licenseImageUrl" :src="merchantDatas.licenseImageUrl" class="avatar">
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>-->
				  			<el-upload action="/api/share/picture/upload" :before-upload="beforeImgUpload" :disabled="disabled" :show-file-list="false" :on-success="handleCompanySuccess" name="upfile" list-type="picture" :headers="headers">
				  				<div v-if="merchantDatas.licenseImageUrl" class="imgBox">
		  							<img :src="merchantDatas.licenseImageUrl" class="avatar imgNow">
		  							<span class="delImg" v-show='!disabled' @click="delImg1()">×</span>
		  						</div>
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
				  		</td>
				  		<td>{{$t('mer.DirectorHKID1')}}*</td>
				  		<td>
				  			<!--<el-upload action="/api/share/picture/upload" :disabled="disabled" :show-file-list="false" :on-success="handleCopySuccess" name="upfile" list-type="picture" :headers="headers">
		  						<img v-if="merchantDatas.identityCardFrontImageUrl" :src="merchantDatas.identityCardFrontImageUrl" class="avatar">
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>-->
				  			<el-upload action="/api/share/picture/upload" :before-upload="beforeImgUpload" :disabled="disabled" :show-file-list="false" :on-success="handleCopySuccess" name="upfile" list-type="picture" :headers="headers">
				  				<div v-if="merchantDatas.identityCardFrontImageUrl" class="imgBox">
		  							<img :src="merchantDatas.identityCardFrontImageUrl" class="avatar imgNow">
		  							<span class="delImg" v-show='!disabled' @click="delImg2()">×</span>
		  						</div>
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
				  		</td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.BankStatement')}}*</td>
				  		<td>
				  			<!--<el-upload action="/api/share/picture/upload" :disabled="disabled" :show-file-list="false" :on-success="handleMonthlySuccess"  name="upfile" list-type="picture" :headers="headers">
		  						<img v-if="merchantDatas.bankCardImageUrl" :src="merchantDatas.bankCardImageUrl" class="avatar">
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>-->
				  			<el-upload action="/api/share/picture/upload" :before-upload="beforeImgUpload" :disabled="disabled" :show-file-list="false" :on-success="handleMonthlySuccess" name="upfile" list-type="picture" :headers="headers">
				  				<div v-if="merchantDatas.bankCardImageUrl" class="imgBox">
		  							<img :src="merchantDatas.bankCardImageUrl" class="avatar imgNow">
		  							<span class="delImg" v-show='!disabled' @click="delImg3()">×</span>
		  						</div>
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
				  		</td>
				  		<td>{{$t('mer.Logo')}}</td>
				  		<td>
				  			<!--<el-upload action="/api/share/picture/upload" :disabled="disabled" :show-file-list="false" :on-success="handleMonthlySuccess"  name="upfile" list-type="picture" :headers="headers">
		  						<img v-if="merchantDatas.bankCardImageUrl" :src="merchantDatas.bankCardImageUrl" class="avatar">
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>-->
				  			<el-upload action="/api/share/picture/upload" :before-upload="beforeImgUpload" :disabled="disabled" :show-file-list="false" :on-success="handleLogoSuccess" name="upfile" list-type="picture" :headers="headers">
				  				<div v-if="merchantDatas.logo" class="imgBox">
		  							<img :src="merchantDatas.logo" class="avatar imgNow">
		  							<span class="delImg" v-show='!disabled' @click="delImg5()">×</span>
		  						</div>
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
				  		</td>
				  		<td></td>
				  		<td></td>
				  	</tr>
				  	<tr style="height: 100px;">
				  		<td>{{$t('mer.Photos')}}*</td>
				  		<td colspan="3" style="text-align: left;position: relative;" v-show="this.states===1">
				  			<!--<el-upload action="/api/share/picture/upload" :disabled="disabled" :show-file-list="false" :on-success="handleStoreLogoSuccess" name="upfile" list-type="picture" :headers="headers">
		  						<img v-if="merchantDatas.facadeImageUrl" :src="merchantDatas.facadeImageUrl" class="avatar">
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>-->
							<ul id="merImgUl" style="padding-left: 10px;">
									
							</ul>
				  			<el-upload v-show='isFiveImg' id='merElupload' :before-upload="beforeImgUpload" action="/api/share/picture/upload" :disabled="disabled" :show-file-list="false" :on-success="handleStoreLogoSuccess" name="upfile" list-type="picture" :headers="headers" style="display: inline-block;position: absolute;top: 0px">
				    			<i class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
				  		</td>
				  		
				  		<td colspan="3" style="text-align: left;position: relative;" v-show="this.states===2">
							<ul id="modifyMerUl">
								<li v-if='merchantDatas.facadeImageUrl'>
									<img :src="merchantDatas.facadeImageUrl" alt="" />
									<span class="delImg" v-show='!disabled' @click="delImg10()">×</span>
								</li>
								<li v-if='merchantDatas.facadeImageUrl1'>
									<img :src="merchantDatas.facadeImageUrl1" alt="" />
									<span class="delImg" v-show='!disabled' @click="delImg11()">×</span>
								</li>
								<li v-if='merchantDatas.facadeImageUrl2'>
									<img :src="merchantDatas.facadeImageUrl2" alt="" />
									<span class="delImg" v-show='!disabled' @click="delImg12()">×</span>
								</li>
								<li v-if='merchantDatas.facadeImageUrl3'>
									<img :src="merchantDatas.facadeImageUrl3" alt="" />
									<span class="delImg" v-show='!disabled' @click="delImg13()">×</span>
								</li>
								<li v-if='merchantDatas.facadeImageUrl4'>
									<img :src="merchantDatas.facadeImageUrl4" alt="" />
									<span class="delImg" v-show='!disabled' @click="delImg14()">×</span>
								</li>
							</ul>
							<el-upload v-show='isMerFiveImg' id="modifyMerElupload" action="/api/share/picture/upload" :disabled="disabled" :show-file-list="false" :on-success="shopPhotosSuccess" name="upfile" list-type="picture" :headers="headers" style="display: inline-block;position: absolute;top: 20px">
								<i class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</td>
						<td></td>
						<td></td>
				  	</tr>
			  	</tbody>
			</table>
			<table v-else class="form-table" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
				<tbody>
					<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('AuMer.CompanyInfomation')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>{{$t('AuMer.RegistrationName')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.name" :disabled="disabled"/></td>
				  		<td>{{$t('AuMer.AustraliaBusinessNumber')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.businessRegistrationNo" :disabled="disabled"/></td>
				  		<td>{{$t('AuMer.BusinessInfomation')}}</td>
				  		<td>
						  	<el-select v-model="merchantDatas.industry" @change="selectIndustry()" id='AuIndustry' value-key="id" :placeholder="$t('placeH.Please')" :disabled="disabled" clearable style="line-height: 40px;">
                  <el-option v-for="item in optionsI" :key="item.id" :label="item.industryName" :value="item.industryName"></el-option>
                </el-select>
				  		</td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('AuMer.ContactNumber')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.officeNo" :disabled="disabled"/></td>
				  		<td>{{$t('AuMer.Address')}}*</td>
				  		<td><input type="text" v-model="merchantDatas.address" :disabled="disabled"/></td>
				  		<td></td>
				  		<td><input type="text" disabled="disabled"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('AuMer.City')}}</td>
				  		<td><input type="text" v-model="merchantDatas.bankProvince" :disabled="disabled"/></td>
				  		<td>{{$t('AuMer.Postcode')}}</td>
				  		<td><input type="text" v-model="merchantDatas.mailingAddress" :disabled="disabled"/></td>
				  		<td>{{$t('AuMer.State')}}</td>
				  		<td><input type="text" v-model="merchantDatas.bankCity" :disabled="disabled"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('AuMer.Website')}}</td>
				  		<td>
				  			<input type="text" v-model="merchantDatas.companyUrl" :disabled="disabled"/>
				  		</td>
				  		<td></td>
				  		<td></td>
				  		<td></td>
				  		<td></td>
				  	</tr>
				  	<tr height="100px">
				  		<td>{{$t('AuMer.CompanyDescripption')}}</td>
				  		<td colspan="5">
				  			<textarea v-model="merchantDatas.companyProfile" style="height: 100%; width: 100%;padding: none;margin-top: 4px;border: none;" :disabled="disabled">
				  			</textarea>
				  		</td>
				  		<!--<td></td>
				  		<td></td>
				  		<td></td>
				  		<td></td>-->
				  	</tr>
				  	
					 <tr>
					 	<td colspan="6" style="text-align: left;">
				  			<div class="table-head">{{$t('AuMer.ContactInfomation')}}</div>
				  		</td>
					 </tr> 	
			  		<tr>
			  			<td>{{$t('AuMer.FullNmae')}}*</td>
				  		<td><input v-model="merchantDatas.legalPerson" type="text" :disabled="disabled"/></td>
				  		<td>{{$t('AuMer.JobTitle')}}</td>
				  		<td><input v-model="merchantDatas.post" type="text" :disabled="disabled"/></td>
				  		<td>{{$t('AuMer.TelephoneNo')}}*</td>
				  		<td><input v-model="merchantDatas.liaisonPhone" type="text" :disabled="disabled"/></td>
			  		</tr>
				  	<tr>
			  			<td>{{$t('AuMer.EmailAddress')}}*</td>
				  		<td><input v-model="merchantDatas.email" type="text" :disabled="disabled"/></td>
				  		<td></td>
				  		<td><input type="text" disabled="disabled"/></td>
				  		<td></td>
				  		<td><input type="text" disabled="disabled"/></td>
				  	</tr>
			  		
				  	<tr>
				  		<td colspan="6" style="text-align: left;">
				  			<div class="table-head">{{$t('AuMer.BillingInfomation')}}</div>
				  		</td>
				  	</tr>	
				  	<tr>
			  			<td>{{$t('AuMer.BankName')}}*</td>
				  		<td><input v-model="merchantDatas.bankName" type="text" :disabled="disabled"/></td>
				  		<td>{{$t('AuMer.CompanyAccountNmae')}}*</td>
				  		<td><input v-model="merchantDatas.accountName" type="text" :disabled="disabled"/></td>
				  		<td>{{$t('AuMer.BSB')}}*</td>
				  		<td><input v-model="merchantDatas.branchCode" type="text" :disabled="disabled"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('AuMer.AccountNumber')}}*</td>
					  	<td><input v-model="merchantDatas.accountNo" type="text" :disabled="disabled"/></td>
				  	</tr>
			  		
				  	<tr>
				  		<td colspan="6" style="text-align: left;">
				  			<div class="table-head">{{$t('AuMer.OtherInformation')}}</div>
				  		</td>
				  	</tr>
				  	<tr>
			  			<td>{{$t('search.SubAccountNo')}}*</td>
				  		<td><input v-model="merchantDatas.no" type="text" :disabled="disabled"/></td>
				  		<td>{{$t('mer.ServiceChargeBearer')}}*</td>
				  		<td>
				  			<el-select :placeholder="$t('placeH.Please')" v-model="merchantDatas.chargeType" :disabled="disabled" clearable style="line-height: 40px;">
			  					<el-option :value="$t('mer.Customer')"></el-option>
					    		<el-option :value="$t('button.Merchant')"></el-option>
					    	</el-select>
				  		</td>
				  		<td>{{$t('AuMer.Rate')}}*</td>
				  		<td>
				  			<input v-model="merchantDatas.fee" type="text" :disabled="disabled"/>
				  		</td>
				  	</tr>
				  	
				  	<!-- <tr>
			  			<td>{{$t('AuMer.SettlementPeriod')+ '(T+)'}}*</td>
				  		<td>
				  			<el-select :placeholder="$t('placeH.Please')" v-model="merchantDatas.setDay" :disabled="disabled" clearable style="line-height: 40px;">
			  					<el-option value="2"></el-option>
					    		<el-option value="3"></el-option>
					    	</el-select>
				  		</td>
				  		<td></td>
				  		<td><input type="text" disabled="disabled"/></td>
				  		<td></td>
				  		<td><input type="text" disabled="disabled"/></td>
				  	</tr> -->
				  	
				  	<tr>
				  		<td>{{$t('mer.Photos')}}*</td>
				  		<td colspan="3">
				  			<ul class="imgTdUl">
				  				<li>
					  				<!--<el-upload style="display: inline-block;" action="/api/share/picture/upload" :disabled="disabled" :show-file-list="false" :on-success="handleStoreLogoSuccess" name="upfile" list-type="picture" :headers="headers">
				  						<img v-if="merchantDatas.facadeImageUrl" :src="merchantDatas.facadeImageUrl" class="avatar">
						    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>-->
									<div v-if="merchantDatas.facadeImageUrl" class="imgBox">
			  							<img :src="merchantDatas.facadeImageUrl" class="avatar imgNow">
			  							<span class="delImg" v-show='!disabled' @click="delImg4()">×</span>
			  						</div>
						  			<el-upload v-else action="/api/share/picture/upload" :before-upload="beforeImgUpload" :disabled="disabled" :show-file-list="false" :on-success="AuMerHandleStoreLogoSuccess" name="upfile" list-type="picture" :headers="headers">
						    			<i class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
					  			</li>
								<li>
									<!--<el-upload style="display: inline-block;" action="/api/share/picture/upload" :disabled="disabled" :show-file-list="false" :on-success="handleMonthlySuccess" name="upfile" list-type="picture" :headers="headers">
				  						<img v-if="merchantDatas.bankCardImageUrl" :src="merchantDatas.bankCardImageUrl" class="avatar">
						    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>-->
									<div v-if="merchantDatas.bankCardImageUrl" class="imgBox">
			  							<img :src="merchantDatas.bankCardImageUrl" class="avatar imgNow">
			  							<span class="delImg" v-show='!disabled' @click="delImg3()">×</span>
			  						</div>
						  			<el-upload v-else action="/api/share/picture/upload" :before-upload="beforeImgUpload" :disabled="disabled" :show-file-list="false" :on-success="handleMonthlySuccess" name="upfile" list-type="picture" :headers="headers">
						    			<i class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
								</li>
								<li>
									<!--<el-upload style="display: inline-block;" action="/api/share/picture/upload" :disabled="disabled" :show-file-list="false" :on-success="handleCopySuccess" name="upfile" list-type="picture" :headers="headers">
				  						<img v-if="merchantDatas.identityCardFrontImageUrl" :src="merchantDatas.identityCardFrontImageUrl" class="avatar">
						    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>-->
									<div v-if="merchantDatas.identityCardFrontImageUrl" class="imgBox">
			  							<img :src="merchantDatas.identityCardFrontImageUrl" class="avatar imgNow">
			  							<span class="delImg" v-show='!disabled' @click="delImg2()">×</span>
			  						</div>
						  			<el-upload v-else action="/api/share/picture/upload" :before-upload="beforeImgUpload" :disabled="disabled" :show-file-list="false" :on-success="handleCopySuccess" name="upfile" list-type="picture" :headers="headers">
						    			<i class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
								</li>
								<li>
									<!--<el-upload style="display: inline-block;" action="/api/share/picture/upload" :disabled="disabled" :show-file-list="false" :on-success="handleCompanySuccess" name="upfile" list-type="picture" :headers="headers">
				  						<img v-if="merchantDatas.licenseImageUrl" :src="merchantDatas.licenseImageUrl" class="avatar">
						    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>-->
									<div v-if="merchantDatas.licenseImageUrl" class="imgBox">
			  							<img :src="merchantDatas.licenseImageUrl" class="avatar imgNow">
			  							<span class="delImg" v-show='!disabled' @click="delImg1()">×</span>
			  						</div>
						  			<el-upload v-else action="/api/share/picture/upload" :before-upload="beforeImgUpload" :disabled="disabled" :show-file-list="false" :on-success="handleCompanySuccess" name="upfile" list-type="picture" :headers="headers">
						    			<i class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
								</li>
								<li>
									<!--<el-upload style="display: inline-block;" action="/api/share/picture/upload" :disabled="disabled" :show-file-list="false" :on-success="handleBusinessSuccess" name="upfile" list-type="picture" :headers="headers">
				  						<img v-if="merchantDatas.businessRegistrationUrl" :src="merchantDatas.businessRegistrationUrl" class="avatar">
						    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>-->
									<div v-if="merchantDatas.businessRegistrationUrl" class="imgBox">
			  							<img :src="merchantDatas.businessRegistrationUrl" class="avatar imgNow">
			  							<span class="delImg" v-show='!disabled' @click="delImg()">×</span>
			  						</div>
						  			<el-upload v-else action="/api/share/picture/upload" :before-upload="beforeImgUpload" :disabled="disabled" :show-file-list="false" :on-success="handleBusinessSuccess" name="upfile" list-type="picture" :headers="headers">
						    			<i class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
								</li>
				  			</ul>
				  		</td>
				  		<td></td>
				  		<td><input type="text" disabled="disabled"/></td>
				  	</tr>
				</tbody>
			</table>
			<div class="btn-box">
			    <el-button  class="blue-btn small-btn" @click="merDetails">{{$t('button.Return')}}</el-button>
			    <el-button  class="green-btn small-btn" v-if='isAdd' @click="addMec()">{{$t('button.New')}}</el-button>
			    <el-button  class="green-btn small-btn" v-if='isModify' @click="modify">{{$t('button.Modify')}}</el-button>
			    <el-button  class="green-btn small-btn" v-show='showBtn' @click='commitModify()'>{{ this.merState === '2' ? $t('button.Resubmit') : $t('button.OK') }}</el-button>
			</div>
		</el-form>
	</div>
</template>

<script>
import {
  addMerchant,
  merchantDetail,
  queryAgent,
  queryIndustry,
  reauditMer
} from "api/businessManagement/merchant/index";
import { salesmanAll, querySuperiorAgent } from "api/merchant/agent/index";
export default {
  name: "merDetails",
  props: ["id", "states", "disId", "merState"],
  data() {
    return {
      currency: localStorage.getItem("companyId") === "2" ? "(A$)" : "(HK$)",
      distributorObj: {},
      salesmanObj: {},
      //商户新增表格数据
      merchantDatas: {
        //公司资料
        name: undefined /*商户登记名称*/,
        address: undefined /*登记地址*/,
        mailingAddress: undefined /*邮寄地址*/,
        businessRegistrationNo: undefined /*商业登记号码*/,
        registeredCapital: undefined /*资金总额（HK$）*/,
        establishmentYear: undefined /*成立年数*/,
        establishPlace: undefined /*成立地点*/,
        staffNumber: undefined /*雇员人数*/,
        merchantsType: undefined /*商户类型商户类型(0:线上商户 1：线下商户)*/,
        companyType: undefined /*公司类别*/,
        liaisonPerson: undefined /*联络人*/,
        email: undefined /*邮箱地址*/,
        post: undefined /*职位(0:老板,1:店长,2:店员)*/,
        officeNo: undefined /*办公室电话*/,
        liaisonPhone: undefined /*手机号码*/,
        fax: undefined /*传真号码*/,
        legalPerson: undefined /*董事全名*/,
        legalPersonIdNumber: undefined /*董事身份证号*/,
        passportNumber: undefined /*董事护照号码*/,
        nationality: undefined /*国籍*/,
        no: undefined /*子商户号*/,
        //联络资料
        url: undefined /*网址*/,
        launchDate: undefined /*预定服务推出日期*/,
        technical: undefined /*技术联络人*/,
        technicalEmail: undefined /*邮箱地址（技术）*/,
        technicalPhone: undefined /*联络电话（技术）*/,
        operation: undefined /*运营联络人*/,
        operationEmail: undefined /*邮箱地址（运营）*/,
        operationPhone: undefined /*联络电话（运营）*/,
        accountant: undefined /*会计联络人*/,
        accountantEmail: undefined /*邮箱地址（会计）*/,
        accountantPhone: undefined /*联络电话（会计）*/,
        //技术资料
        profession: undefined /*业务性质*/,
        industry: undefined /*产品/服务类别*/,
        targetClient: undefined /*目标客户*/,
        paymentServiceProvider: undefined /*现在/曾经选用的付款服务供应商/银行*/,
        turnover: undefined /*过去两年营业额（HK$）*/,
        //互联网上提供的业务
        expressSupplier: undefined /*送货快递商或快递供应商*/,
        serviceHotline: undefined /*客户服务热线*/,
        isReturnPolicy: undefined /*是否有退换货政策(0:是1：否)*/,
        cycleTime: undefined /*由收单至送货所需时间*/,
        isSignFor: undefined /*是否签收(0:是1：否)*/,
        budgetTurnoverThree: undefined /*预算每月营业额（三月后*/,
        budgetTurnoverSix: undefined /*预算每月营业额六月后*/,
        budgetTurnoverYear: undefined /*预算每月营业额：一年后：*/,
        monthDealSum: undefined /*每月交易总数*/,
        monthOperationRental: undefined /*每月运营总额*/,
        monthDealAvg: undefined /*每宗交易平均金额*/,
        monthDealMin: undefined /*每宗交易最低金额*/,
        monthDealMax: undefined /*每宗交易最高金额*/,
        //清结算资讯登记
        accountName: undefined /*账户名称*/,
        accountNo: undefined /*账户号*/,
        bankName: undefined /*银行名称*/,
        bankCode: undefined /*银行编号*/,
        branchCode: undefined /*分行号*/,
        bankAddres: undefined /*银行地址*/,
        swiftCode: undefined /*银行国际代码*/,
        fee: undefined /*手续费率*/,
        chargeType: undefined /*手续费承担方/收费类型(0:商户承担,1:用户承*/,
        distributorId: undefined /*所属代理商（传Id）*/,
        distributorNumber: undefined /*代理商编号*/,
        salesmanId: undefined /*业务员*/,
        salesmanNumber: undefined /*业务员编号*/,
        salesmanProportion: undefined /*分成比例*/,
        //附件
        businessRegistrationUrl: undefined /*商业登记副本*/,
        licenseImageUrl: undefined /*公司注册证明副本*/,
        identityCardFrontImageUrl: undefined /*董事身份证副本*/,
        bankCardImageUrl: undefined /*银行月结单副本*/,
        facadeImageUrl: undefined /*公司或店铺相片*/,
        facadeImageUrl1: undefined /*公司或店铺相片*/,
        facadeImageUrl2: undefined /*公司或店铺相片*/,
        facadeImageUrl3: undefined /*公司或店铺相片*/,
        facadeImageUrl4: undefined /*公司或店铺相片*/,
        setDay: undefined /*结算周期*/,
        //澳洲商户进件
        bankProvince: undefined /*省*/,
        bankCity: undefined /*州*/,
        companyProfile: undefined /*公司简介*/,
        companyUrl: undefined /*公司网站*/,
        salesmanName: undefined /*业务员*/
      },
      distributorName: "",
      isModify: this.states === 2 ? true : false,
      isAdd: this.states === 1 ? true : false,
      disabled: this.states === 1 ? false : true,
      showBtn: false,
      headers: { "access-token": localStorage.getItem("access-token") },
      options: [],
      optionsI: JSON.parse(localStorage.getItem("queryIndustryObj")),
      nullObj: {},
      locale: localStorage.getItem("locale") === "en" ? "1" : "0",
      companyId: localStorage.getItem("companyId"),
      selectSalesmanData: [],
      count: 0,
      counts: [
        "facadeImageUrl",
        "facadeImageUrl1",
        "facadeImageUrl2",
        "facadeImageUrl3",
        "facadeImageUrl4"
      ],
      isFiveImg: true,
      isMerFiveImg: true,
      userType: localStorage.getItem("userType"),
      selDistributorId: localStorage.getItem("distributorId"),
      HKMerRequiredArr: [
        "name",
        "address",
        "businessRegistrationNo",
        "merchantsType",
        "liaisonPerson",
        "officeNo",
        "liaisonPhone",
        "legalPerson",
        "legalPersonIdNumber",
        "no",
        "accountName",
        "accountNo",
        "bankName",
        "bankCode",
        "bankAddres",
        "swiftCode",
        "fee",
        "chargeType",
        "distributorNumber",
        "distributorId",
        "setDay",
        "businessRegistrationUrl",
        "licenseImageUrl",
        "identityCardFrontImageUrl",
        "bankCardImageUrl",
        "facadeImageUrl"
      ],
      AuMerRequiredArr: [
        "name",
        "businessRegistrationNo",
        "officeNo",
        "address",
        "legalPerson",
        "liaisonPhone",
        "email",
        "bankName",
        "accountName",
        "branchCode",
        "accountNo",
        "no",
        "chargeType",
        "fee",
        "facadeImageUrl"
      ],
      requiredArr: [],
      flag: false,
      industryId: null,
      industry: null,
      isReturnPolicy: null,
      isSignFor: null
    };
  },
  created() {
    // console.log(this.optionsI);
    if (this.merState === "0") {
      this.isModify = false;
    }
    if (this.userType === "2") {
      this.nullObj.distributorId = this.selDistributorId;
      this.queryAgentAjax(this.nullObj);
    } else {
      this.nullObj.companyId = this.companyId;
      this.queryAgentAjax(this.nullObj);
    }
    //查询商户详情数据
    if (this.states === 1) {
    } else if (this.states === 2) {
      this.getMerData(this.id);
      this.isMerFiveImg = false;
    }
  },
  methods: {
    beforeImgUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message(this.$t('hint.ThePictureSizeMustNotExceed5M'));
      }
      return isLt2M;
    },
    // 有否签收
    selectIsSignFor() {
      this.merchantDatas.isSignFor = this.isSignFor;
    },
    // 退换货政策
    selectReturnPolicy() {
      this.merchantDatas.isReturnPolicy = this.isReturnPolicy;
    },
    // 选择行业
    selectIndustry() {
      // console.log(111);
      // this.industryId = this.industry;
    },
    //删除照片
    delImg10() {
      this.$set(this.merchantDatas, "facadeImageUrl", undefined);
      $("#modifyMerElupload").css({ display: "inline-block" });
    },
    delImg11() {
      this.$set(this.merchantDatas, "facadeImageUrl1", undefined);
      $("#modifyMerElupload").css({ display: "inline-block" });
    },
    delImg12() {
      this.$set(this.merchantDatas, "facadeImageUrl2", undefined);
      $("#modifyMerElupload").css({ display: "inline-block" });
    },
    delImg13() {
      this.$set(this.merchantDatas, "facadeImageUrl3", undefined);
      $("#modifyMerElupload").css({ display: "inline-block" });
    },
    delImg14() {
      this.$set(this.merchantDatas, "facadeImageUrl4", undefined);
      $("#modifyMerElupload").css({ display: "inline-block" });
    },
    //修改店铺相片
    shopPhotosSuccess(res) {
      if (this.merchantDatas.facadeImageUrl === undefined) {
        this.$set(this.merchantDatas, "facadeImageUrl", res.value);
        return false;
      } else if (this.merchantDatas.facadeImageUrl1 === undefined) {
        this.$set(this.merchantDatas, "facadeImageUrl1", res.value);
        return false;
      } else if (this.merchantDatas.facadeImageUrl2 === undefined) {
        this.$set(this.merchantDatas, "facadeImageUrl2", res.value);
        return false;
      } else if (this.merchantDatas.facadeImageUrl3 === undefined) {
        this.$set(this.merchantDatas, "facadeImageUrl3", res.value);
        return false;
      } else if (this.merchantDatas.facadeImageUrl4 === undefined) {
        this.$set(this.merchantDatas, "facadeImageUrl4", res.value);
        return false;
      }
      if (
        this.merchantDatas.facadeImageUrl &&
        this.merchantDatas.facadeImageUrl1 &&
        this.merchantDatas.facadeImageUrl2 &&
        this.merchantDatas.facadeImageUrl3 &&
        this.merchantDatas.facadeImageUrl4
      ) {
        this.isMerFiveImg = false;
      }
    },
    //香港新增公司或店铺照片
    handleStoreLogoSuccess(res) {
      const that = this;
      for (let i = this.counts.length; i >= 0; i--) {
        if (this.merchantDatas[this.counts[i]] === undefined) {
          this.count = i;
        }
      }
      if (this.count === 0) {
        this.merchantDatas.facadeImageUrl = res.value;
        const liObj = $("<li>").attr("id", "liID");
        const imgObj = $("<img>").attr("src",this.merchantDatas.facadeImageUrl
        );
        const spanObj = $("<span>").attr("class", "delImg").attr("id", "spanID").text("×");
        liObj.append(imgObj).append(spanObj).appendTo("#merImgUl");
        $("#spanID").click(function() {
          that.$set(that.merchantDatas, "facadeImageUrl", undefined);
          liObj.remove();
          this.count = 0;
          $("#merElupload").css({ display: "inline-block" });
        });
      } else if (this.count === 1) {
        this.merchantDatas.facadeImageUrl1 = res.value;
        const liObj = $("<li>").attr("id", "liID" + this.count);
        const imgObj = $("<img>").attr("src",this.merchantDatas.facadeImageUrl1
        );
        const spanObj = $("<span>").attr("class", "delImg").attr("id", "spanID" + this.count).text("×");
        liObj.append(imgObj).append(spanObj).appendTo("#merImgUl");
        $("#spanID1").click(function() {
          that.$set(that.merchantDatas, "facadeImageUrl1", undefined);
          liObj.remove();
          this.count = 1;
          $("#merElupload").css({ display: "inline-block" });
        });
      } else if (this.count === 2) {
        this.merchantDatas.facadeImageUrl2 = res.value;
        const liObj = $("<li>").attr("id", "liID" + this.count);
        const imgObj = $("<img>").attr("src",this.merchantDatas.facadeImageUrl2
        );
        const spanObj = $("<span>").attr("class", "delImg").attr("id", "spanID" + this.count).text("×");
        liObj.append(imgObj).append(spanObj).appendTo("#merImgUl");
        $("#spanID2").click(function() {
          that.$set(that.merchantDatas, "facadeImageUrl2", undefined);
          liObj.remove();
          this.count = 2;
          $("#merElupload").css({ display: "inline-block" });
        });
      } else if (this.count === 3) {
        this.merchantDatas.facadeImageUrl3 = res.value;
        const liObj = $("<li>").attr("id", "liID" + this.count);
        const imgObj = $("<img>").attr("src",this.merchantDatas.facadeImageUrl3
        );
        const spanObj = $("<span>").attr("class", "delImg").attr("id", "spanID" + this.count).text("×");
        liObj.append(imgObj).append(spanObj).appendTo("#merImgUl");
        $("#spanID3").click(function() {
          that.$set(that.merchantDatas, "facadeImageUrl3", undefined);
          liObj.remove();
          this.count = 3;
          $("#merElupload").css({ display: "inline-block" });
        });
      } else if (this.count === 4) {
        this.merchantDatas.facadeImageUrl4 = res.value;
        const liObj = $("<li>").attr("id", "liID" + this.count);
        const imgObj = $("<img>").attr("src",this.merchantDatas.facadeImageUrl4
        );
        const spanObj = $("<span>").attr("class", "delImg").attr("id", "spanID" + this.count).text("×");
        liObj.append(imgObj).append(spanObj).appendTo("#merImgUl");
        $("#spanID4").click(function() {
          that.$set(that.merchantDatas, "facadeImageUrl4", undefined);
          liObj.remove();
          this.count = 4;
          $("#merElupload").css({ display: "inline-block" });
        });
      }
      if ( this.merchantDatas.facadeImageUrl && this.merchantDatas.facadeImageUrl1 && this.merchantDatas.facadeImageUrl2 && this.merchantDatas.facadeImageUrl3 && this.merchantDatas.facadeImageUrl4 ) {
        this.isFiveImg = false;
      }
    },
    //商业登记副本
    delImg() {
      this.$set(this.merchantDatas, "businessRegistrationUrl", undefined);
    },
    //公司注册证明副本
    delImg1() {
      this.$set(this.merchantDatas, "licenseImageUrl", undefined);
    },
    //董事身份证副本
    delImg2() {
      this.$set(this.merchantDatas, "identityCardFrontImageUrl", undefined);
    },
    //银行月结单相片
    delImg3() {
      this.$set(this.merchantDatas, "bankCardImageUrl", undefined);
    },
    //公司或店铺相片
    delImg4() {
      this.$set(this.merchantDatas, "facadeImageUrl", undefined);
    },
    //商户图标
    delImg5() {
      this.$set(this.merchantDatas, "logo", undefined);
    },
    merDetails() {
      //触发父组件v-on事件
      this.$emit("merDetailsChange");
    },
    //根据商户id查询商户信息
    getMerData(id) {
      merchantDetail(id)
        .then(res => {
          this.merchantDatas = res.value;
          this.merchantDatas.merchantsType = this.merchantDatas.merchantsType === 'Y' ? this.$t("mer.OnlineMerchants") : this.$t("mer.UnderLineMerchant");
          this.merchantDatas.chargeType = this.merchantDatas.chargeType === "0" ? this.$t("button.Merchant") :this.$t("mer.Customer");
          // if (this.merchantDatas.industry) {
          //   if(this.companyId === '2'){
          //     this.industryId = this.merchantDatas.industry;
          //     const modifyIndustryId = Number(this.merchantDatas.industry)  - 11;
          //     $('#AuIndustry').children()[1].value = this.optionsI[modifyIndustryId].industryName;
          //   }else{
          //     this.industryId = this.merchantDatas.industry;
          //     const modifyIndustryId = Number(this.merchantDatas.industry) - 11;
          //     $('#HKIndustry').children()[1].value = this.optionsI[modifyIndustryId].industryName;
          //   }
          // }
           if (this.merchantDatas.isSignFor === "0") {
            this.isSignFor = this.$t("search.YES");
          }
          if (this.merchantDatas.isSignFor === "1") {
            this.isSignFor = this.$t("search.NO");
					}
           if (this.merchantDatas.isReturnPolicy === "0") {
            this.isReturnPolicy = this.$t("search.YES");
          }
          if (this.merchantDatas.isReturnPolicy === "1") {
            this.isReturnPolicy = this.$t("search.NO");
          }
          // console.log($('#distributorObj').children()[1]);
          $("#distributorObj").children()[1].value = this.merchantDatas.distributorNumber;
          if (this.merchantDatas.salesmanName) {
            $("#salesmanObj").children()[1].value = this.merchantDatas.salesmanName;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //修改按钮
    modify() {
      this.disabled = false;
      this.showBtn = true;
      this.isModify = false;
      this.isMerFiveImg = true;
      if(this.merchantDatas.distributorNumber){
        $("#distributorObj").children()[1].placeholder = this.merchantDatas.distributorNumber;
      }
      if (this.merchantDatas.salesmanName) {
        $("#salesmanObj").children()[1].placeholder = this.merchantDatas.salesmanName;
      }
    },
    handleLogoSuccess(res) {
      this.$set(this.merchantDatas, "logo", res.value);
    },
    //商业登记副本
    handleBusinessSuccess(res) {
      this.$set(this.merchantDatas, "businessRegistrationUrl", res.value);
    },
    //公司注册证明副本
    handleCompanySuccess(res) {
      this.$set(this.merchantDatas, "licenseImageUrl", res.value);
    },
    //董事身份证副本
    handleCopySuccess(res) {
      this.$set(this.merchantDatas, "identityCardFrontImageUrl", res.value);
    },
    //银行月结单相片
    handleMonthlySuccess(res) {
      this.$set(this.merchantDatas, "bankCardImageUrl", res.value);
    },
    //公司或店铺相片
    AuMerHandleStoreLogoSuccess(res) {
      this.$set(this.merchantDatas, "facadeImageUrl", res.value);
    },
    //商户新增按钮
    addMec() {
      //				let remarks=0;
      this.$msgbox({
        title: this.$t("hint.Alert"),
        message: this.$t("hint.SureToAddThisMerchant"),
        showClose: false,
        showCancelButton: true,
        confirmButtonText: this.$t("button.OK"),
        cancelButtonText: this.$t("button.Cancel"),
        beforeClose: (action, instance, done) => {
          // console.log(action);
          if (action == "confirm") {
            this.merchantDatas.remarks = 0;
            this.ajaxAddMec(this.merchantDatas);
          }
          done();
        }
      });
    },
    //商户新增资料向后台提交数据的方法
    ajaxAddMec(value) {
      [...this.requiredArr] =
        this.companyId === "2" ? this.AuMerRequiredArr : this.HKMerRequiredArr;
      for (let i = 0; i < this.requiredArr.length; i++) {
        if (
          this.merchantDatas[this.requiredArr[i]] === "" ||
          this.merchantDatas[this.requiredArr[i]] === null ||
          this.merchantDatas[this.requiredArr[i]] === undefined
        ) {
          this.$message(this.$t("hint.MandatoryFieldsAreNotFilledIn"));
          return false;
        } else {
          this.flag = true;
        }
      }
      if (this.flag) {
        this.merchantDatas.companyId = localStorage.getItem("companyId");
        if (this.merchantDatas.companyId === "2") {
          this.merchantDatas.setDay = 3;
          if (value.branchCode) {
            if (value.branchCode.indexOf("-", 3) === -1) {
              const arr = value.branchCode.split("");
              arr.splice(3, 0, "-");
              value.branchCode = arr.join("");
            }
          }
        }
        let type = this.merchantDatas.merchantsType;
        if (type === this.$t("mer.OnlineMerchants")) {
          this.merchantDatas.merchantsType = "Y";
        } else if (type === this.$t("mer.UnderLineMerchant")) {
          this.merchantDatas.merchantsType = "N";
        }
        let chargeType = this.merchantDatas.chargeType;
        if (chargeType === this.$t("button.Merchant")) {
          this.merchantDatas.chargeType = "0";
        }
        if (chargeType === this.$t("mer.Customer")) {
          this.merchantDatas.chargeType = "1";
        }
        let isReturnPolicy = this.merchantDatas.isReturnPolicy;
        if (isReturnPolicy === this.$t("search.YES")) {
          this.merchantDatas.isReturnPolicy = "0";
        }
        if (isReturnPolicy === this.$t("search.NO")) {
          this.merchantDatas.isReturnPolicy = "1";
        }
        let isSignFor = this.merchantDatas.isSignFor;
        if (isSignFor === this.$t("search.YES")) {
          this.merchantDatas.isSignFor = "0";
        }
        if (isSignFor === this.$t("search.NO")) {
          this.merchantDatas.isSignFor = "1";
        }
        // this.merchantDatas.industry = this.industryId;
        addMerchant(value).then(res => {
          if (res.code === 0) {
            this.$notify({
              title: this.$t("hint.Alert"),
              message: this.$t("hint.CreateOK"),
              type: "success",
              duration: 2000
            });
            //新增成功返回商户列表
            this.$emit("merDetailsChange");
          } else if (res.code === 40004002) {
            this.$notify({
              title: this.$t("hint.Alert"),
              message: this.$t("hint.PhoneNumberAlreadyExists"),
              type: "error",
              duration: 2000
            });
            this.leaveBehing();
          } else if (res.code === 40002032) {
            this.$notify({
              title: this.$t("hint.Alert"),
              message: this.$t("hint.MerchantNameAlreadyExists"),
              type: "error",
              duration: 2000
            });
            this.leaveBehing();
          } else {
            this.$notify({
              title: this.$t("hint.Alert"),
              message: this.$t("hint.CreateFailed"),
              type: "error",
              duration: 2000
            });
            this.leaveBehing();
          }
        });
      }
    },
    //新增失败留在当前页
    leaveBehing() {
      let type = this.merchantDatas.merchantsType;
      if (type === "Y") {
        this.merchantDatas.merchantsType = this.$t("mer.OnlineMerchants");
      } else if (type === "N") {
        this.merchantDatas.merchantsType = this.$t("mer.UnderLineMerchant");
      }
      let chargeType = this.merchantDatas.chargeType;
      if (chargeType === "0") {
        this.merchantDatas.chargeType = this.$t("button.Merchant");
      }
      if (chargeType === "1") {
        this.merchantDatas.chargeType = this.$t("mer.Customer");
      }
    },
    //修改完成提交按钮
    commitModify() {
      if (this.merState === "2") {
        this.merchantDatas.remarks = 1;
        this.ajaxMerDetails(this.merchantDatas, 0);
      } else {
        this.merchantDatas.remarks = 1;
        this.ajaxMerDetails(this.merchantDatas, 1);
      }
    },
    // 商户重新提交资料

    //商户修改资料向后台提交数据的方法
    ajaxMerDetails(value, index) {
      this.merchantDatas.oldTermId = this.termId;
      this.merchantDatas.id = this.id;
      this.merchantDatas.bankcardId = this.bankcardId;
      // if (this.industryId) {
      //   this.merchantDatas.industry = this.industryId;
      // }
      let type = this.merchantDatas.merchantsType;
      if (type === this.$t("mer.OnlineMerchants")) {
        this.merchantDatas.merchantsType = "Y";
      } else if (type === this.$t("mer.UnderLineMerchant")) {
        this.merchantDatas.merchantsType = "N";
      }
      let chargeType = this.merchantDatas.chargeType;
      if (chargeType === this.$t("button.Merchant")) {
        this.merchantDatas.chargeType = "0";
      }
      if (chargeType === this.$t("mer.Customer")) {
        this.merchantDatas.chargeType = "1";
      }
      const hintMerMsg =
        this.merState === "2"
          ? this.$t("hint.SureToAddThisMerchant")
          : this.$t("hint.SureToChangeInfoOfTheMerchant");
          // console.log(this.merchantDatas);
      this.$msgbox({
        title: this.$t("hint.Alert"),
        message: hintMerMsg,
        showClose: false,
        showCancelButton: true,
        confirmButtonText: this.$t("button.OK"),
        cancelButtonText: this.$t("button.Cancel")
      })
        .then(() => {
          const func = index === 0 ? reauditMer : addMerchant;
          value.remarks = index === 0 ? 0 : 1;
          func(value).then(res => {
            // console.log("修改按钮确定修改后台返回的信息");
            // console.log(res);
            if (res.code === 0) {
              this.$msgbox({
                title: this.$t("hint.Alert"),
                message: this.$t("hint.SubmittedApprovalPending"),
                showClose: false,
                showCancelButton: true,
                confirmButtonText: this.$t("button.OK"),
                cancelButtonText: this.$t("button.Cancel")
              })
                .then(() => {
                  //商户修改成功返回商户列表页
                  this.$emit("merDetailsChange");
                })
                .catch(() => {
                  //取消操作留在当前页面
                  let type = this.merchantDatas.merchantsType;
                  if (type === "Y") {
                    this.merchantDatas.merchantsType = this.$t(
                      "mer.OnlineMerchants"
                    );
                  } else if (type === "N") {
                    this.merchantDatas.merchantsType = this.$t(
                      "mer.UnderLineMerchant"
                    );
                  }
                  let chargeType = this.merchantDatas.chargeType;
                  if (chargeType === "0") {
                    this.merchantDatas.chargeType = this.$t("button.Merchant");
                  }
                  if (chargeType === "1") {
                    this.merchantDatas.chargeType = this.$t("mer.Customer");
                  }
                });
            } else {
              this.$notify({
                title: this.$t("hint.Alert"),
                message: this.$t("hint.ChangeFailed"),
                type: "error",
                duration: 2000
              });
              //修改商户失败留在当前页
              let type = this.merchantDatas.merchantsType;
              if (type === "Y") {
                this.merchantDatas.merchantsType = this.$t(
                  "mer.OnlineMerchants"
                );
              } else if (type === "N") {
                this.merchantDatas.merchantsType = this.$t(
                  "mer.UnderLineMerchant"
                );
              }
              let chargeType = this.merchantDatas.chargeType;
              if (chargeType === "0") {
                this.merchantDatas.chargeType = this.$t("button.Merchant");
              }
              if (chargeType === "1") {
                this.merchantDatas.chargeType = this.$t("mer.Customer");
              }
            }
          });
        })
        .catch(() => {
          done();
        });
    },
    //查询代理商
    queryAgentAjax(data) {
      querySuperiorAgent(data).then(res => {
        this.options = res.value;
      });
    },
    selectId() {
      this.merchantDatas.distributorId = this.distributorObj.id;
      this.merchantDatas.distributorNumber = this.distributorObj.name;
      const searchAgent = {};
      searchAgent.distributorId = this.merchantDatas.distributorId;
      salesmanAll(searchAgent).then(res => {
        this.selectSalesmanData = res.value;
      });
      this.merchantDatas.salesmanNumber = undefined;
      this.merchantDatas.salesmanId = undefined;
    },
    selectSalesman() {
      this.merchantDatas.salesmanName = this.salesmanObj.salesmanName;
      this.merchantDatas.salesmanNumber = this.salesmanObj.salesmanNumber;
      this.merchantDatas.salesmanId = this.salesmanObj.id;
    }
    // 格式化显示金额
  }
};
</script>

<style>
.quarter {
  width: 40%;
  float: left;
  line-height: 40px;
}
.el-upload-list--picture .el-upload-list__item {
  width: 80px;
  float: left;
}
.el-upload-list--picture
  .el-upload-list__item.is-success
  .el-upload-list__item-name {
  display: none;
}
</style>